<<<<<<< HEAD
=======
<<<<<<< HEAD
.composition{
    position: relative;
    &__photo{
        width: 55%;
        box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
        //border-radius: 2px;
        position:absolute;
        z-index: 10;
        transition: all 0.2s;
        outline-offset: 2rem;

        &--p1{
            left:0;
            top: -2rem;
        }

        &--p2{
            right:0;
            top: 2rem;
        }

        &--p3{
            left:20%;
            top: 10rem;
        }

        &:hover{
            outline: 1.5rem solid $color-primary;
            transform: scale(1.05) translateY(-.5rem);
            box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
            z-index: 20;
            
        }
    }
    &:hover &__photo:not(:hover){
        transform: scale(.95);
    }
=======
>>>>>>> de6e2132efcd486cb4ae1f5380f21f923a781de9
.composition {
    position: relative;

    &__photo {
        width: 55%;
        box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
        position: absolute;
        z-index: 10;
        transition: all .2s;
        outline-offset: 2rem;
        &:hover{
            outline: 1.5rem solid $color-primary-dark;
            transform: scale(1.05);
            box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
            z-index: 20;
        }
      
    }
    &__p1 {
        left: 0;
        top: -2rem;
    }
    &__p2{
        right: 0;
        top: 2rem;
    } 
    &__p3 {
        left: 20%;
        top: 10rem;
    }

    &:hover &__photo:not(:hover){
        transform:scale(.95)
    }
    
<<<<<<< HEAD
=======
>>>>>>> 6d73bda8f53f5f9146dd707095dfe9cd4b5a0534
>>>>>>> de6e2132efcd486cb4ae1f5380f21f923a781de9
}